<script>
import { onMounted, reactive, toRefs } from "vue";
import { getInfo } from "../assets/api/info.js";
import {
  getAejl,
  getAc,
  getMounttai,
  getXinjiang,
} from "../assets/api/info.js";
import { useRouter } from "vue-router";
export default {
  setup() {
    let router = useRouter();
    //咨询页面总数据
    let infolists = reactive({
      // 足球数据
      football: [],
      // 加载
      load: true,
      // 切换主题
      editId: 1,
      tab_lists: [
        {
          id: 1,
          name: "全部",
        },
        {
          id: 2,
          name: "阿尔基隆",
        },
        {
          id: 3,
          name: "澳超",
        },
        {
          id: 4,
          name: "泰山队",
        },
        {
          id: 5,
          name: "施洛特贝克",
        },
        {
          id: 6,
          name: "森林狼",
        },
        {
          id: 7,
          name: "新疆男篮",
        },
        {
          id: 8,
          name: "里贝里",
        },
      ],
      Aejl: [],
      tabs: 1,
      // 澳超
      Ac: [],
      // 泰山队
      Mounttai: [],
      // 新疆男篮
      Xinjiang: [],
    });

    onMounted(() => {
      infolists.editId = window.localStorage.getItem("editId");
      document
        .querySelector("body")
        .setAttribute("style", "background-color:#f2f2f2;");
      //咨询内容一足球数据
      getInfo().then((data) => {
        // console.log(data.data.dataList);
        infolists.football = data.data.dataList;
        infolists.load = false;
        // console.log(infolists.football);
      });
      //阿尔基隆
      getAejl().then((data) => {
        infolists.Aejl = data.data.dataList;
      });
      // 澳超
      getAc().then((data) => {
        infolists.Ac = data.data.dataList;
      });
      // 泰山队
      getMounttai().then((data) => {
        // console.log(data.data.dataList);
        infolists.Mounttai = data.data.dataList;
        // console.log(infolists.Mounttai);
      });
      // 新疆男篮
      getXinjiang().then((data) => {
        // console.log(data.data.dataList);
        infolists.Xinjiang = data.data.dataList;
        // console.log(infolists.Mounttai);
      });
    });

    const details_article = (data) => {
      // data = JSON.stringify(data);
      window.localStorage.setItem("article_content", JSON.stringify(data));
      router.push({
        path: "/detailsnew",
        // query:{
        //   data
        // }
      });
    };

    return {
      ...toRefs(infolists),
      details_article,
    };
  },
};
</script>
<template>
  <div class="container" style="background: #f2f2f2">
    <van-sticky>
      <top-coms v-if="editId == 2"></top-coms>
      <top-com v-if="editId == 1"></top-com>
      <van-loading v-if="load" size="30">加载中...</van-loading>

      <div class="tabs" v-if="editId == 1">
        <ul>
          <router-link custom to="/info" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate">热门</li>
          </router-link>
          <router-link custom to="/infonew" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate" class="con">资讯</li>
          </router-link>
          <router-link custom to="/infovideo" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate">视频</li>
          </router-link>
        </ul>
      </div>
      <div class="tabse" v-if="editId == 2">
        <ul>
          <router-link custom to="/info" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate">热门</li>
          </router-link>
          <router-link custom to="/infonew" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate"  class="con">资讯</li>
          </router-link>
          <router-link custom to="/infovideo" v-slot="{ href, navigate }">
            <li :href="href" @click="navigate">视频</li>
          </router-link>
        </ul>
      </div>
      <div class="nav-footers">
        <ul>
          <li
            :class="{ active: tabs == item.id }"
            v-for="item in tab_lists"
            :key="item.id"
            @click="tabs = item.id"
          >
            <a href="javascript:;">{{ item.name }}</a>
          </li>
        </ul>
      </div>
    </van-sticky>

    <!-- 足球 -->
    <div :class="['home', 'dv',{dvs:editId == 2}]" v-show="tabs == 1">
      <div class="home-lists">
        <ul>
          <li
            v-for="item in football"
            :key="item.id"
            @click="details_article(item)"
          >
            <a href="javascript:;">
              <div class="box">
                <div class="name">{{ item.title }}</div>
                <div class="meat fd">
                  <div class="left">
                    <div class="view">
                      <span>#{{ item.tags[0].name }}</span>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
              <div class="box1">
                <div class="img">
                  <img :src="item.coverPicture" alt="" />
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 阿尔基隆 -->
    <div :class="['home', 'dv',{dvs:editId == 2}]" v-show="tabs == 2">
      <div class="home-lists">
        <ul>
          <li
            v-for="item in Aejl"
            :key="item.id"
            @click="details_article(item)"
          >
            <a href="javascript:;">
              <div class="box">
                <div class="name">{{ item.title }}</div>
                <div class="meat fd">
                  <div class="left">
                    <div class="view">
                      <span>#{{ item.tags[0].name }}</span>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
              <div class="box1">
                <div class="img">
                  <img :src="item.coverPicture" alt="" />
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 澳超 -->
    <div :class="['home', 'dv',{dvs:editId == 2}]" v-show="tabs == 3">
      <div class="home-lists">
        <ul>
          <li v-for="item in Ac" :key="item.id" @click="details_article(item)">
            <a href="javascript:;">
              <div class="box">
                <div class="name">{{ item.title }}</div>
                <div class="meat fd">
                  <div class="left">
                    <div class="view">
                      <span>#{{ item.tags[0].name }}</span>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
              <div class="box1">
                <div class="img">
                  <img :src="item.coverPicture" alt="" />
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 泰山队 -->
    <div :class="['home', 'dv',{dvs:editId == 2}]" v-show="tabs == 4">
      <div class="home-lists">
        <ul>
          <li
            v-for="item in Mounttai"
            :key="item.id"
            @click="details_article(item)"
          >
            <a href="javascript:;">
              <div class="box">
                <div class="name">{{ item.title }}</div>
                <div class="meat fd">
                  <div class="left">
                    <div class="view">
                      <span>#{{ item.tags[0].name }}</span>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
              <div class="box1">
                <div class="img">
                  <img :src="item.coverPicture" alt="" />
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 施洛特贝克 -->
    <div :class="['home', 'dv',{dvs:editId == 2}]" v-show="tabs == 5">
      <div class="home-lists">
        <van-empty
          class="custom-image"
          image="../assets/img/null2.png"
          description="暂无数据"
        />
      </div>
    </div>

    <!-- 森林狼 -->
    <div :class="['home', 'dv',{dvs:editId == 2}]" v-show="tabs == 6">
      <div class="home-lists">
        <van-empty
          class="custom-image"
          image="../assets/img/null2.png"
          description="暂无数据"
        />
      </div>
    </div>

    <!-- 新疆男篮 -->
    <div :class="['home', 'dv',{dvs:editId == 2}]" v-show="tabs == 7">
      <div class="home-lists">
        <ul>
          <li
            v-for="item in Xinjiang"
            :key="item.id"
            @click="details_article(item)"
          >
            <a href="javascript:;">
              <div class="box">
                <div class="name">{{ item.title }}</div>
                <div class="meat fd">
                  <div class="left">
                    <div class="view">
                      <span>#{{ item.tags[0].name }}</span>
                    </div>
                  </div>
                  <div class="right">
                    <div class="title">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
              <div class="box1">
                <div class="img">
                  <img :src="item.coverPicture" alt="" />
                </div>
              </div>
            </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 里贝里 -->
    <div :class="['home', 'dv',{dvs:editId == 2}]" v-show="tabs == 8">
      <div class="home-lists">
        <van-empty
          class="custom-image"
          image="../assets/img/null2.png"
          description="暂无数据"
        />
      </div>
    </div>

    <bottom-com :tabId="(tabId = 2)" v-if="editId == 1"></bottom-com>
    <bottom-coms :tabId="(tabId = 2)" v-if="editId == 2"></bottom-coms>  </div>
</template>
<style lang="scss" scoped>
.nav-footers {
  background: #fff;
  padding: 0 12px;
  height: 31px;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  &::-webkit-scrollbar {
    display: none;
  }
  ul {
    font-size: 0;
    white-space: nowrap;
    height: 31px;
    line-height: 31px;
    li {
      position: relative;
      display: inline-block;
      padding: 0 10px;
      height: 31px;
      line-height: 31px;
      text-align: center;
      a {
        font-size: 14px;
        color: #999;
      }
    }
    .active {
      a {
        color: #000;
        font-weight: 700;
      }
    }
  }
}
.home {
  .home-lists {
    ul {
      li {
        margin: 0 0 10px;
        padding: 10px 12px;
        height: 94px;
        background: #fff;
        a {
          display: flex;
          justify-content: space-between;
          .box {
            width: calc(100% - 121px);
            .fd {
              justify-content: space-between;
            }

            .meat {
              height: 17px;
              line-height: 17px;
              display: flex;
              .right {
                .title {
                  color: rgb(120, 122, 130);
                  font-size: 13px;
                  transform: scale(0.85, 0.85);
                  white-space: nowrap;
                }
              }
              .left {
                display: flex;
                .view {
                  display: flex;
                  margin-right: 16px;
                  float: left;
                  font-size: 0;
                  .iconfont {
                    color: #999999;
                    margin-right: 4px;
                  }
                  span {
                    font-size: 12px;
                    color: #999;
                  }
                }
              }
            }
            .name {
              margin-bottom: 17px;
              height: 40px;
              line-height: 20px;
              font-size: 14px;
              color: #242629;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
          .box1 {
            width: 110px;
            height: 74px;
            .img {
              width: 100%;
              height: 100%;
              img {
                width: 100%;
                height: 100%;
                border-radius: 5px;
              }
            }
          }
        }
      }
    }
  }
}
.home .home-lists ul li a .box .meat .view i,
.home .home-lists ul li a .box .meat .view span {
  display: inline-block;
  vertical-align: middle;
}

.dv {
  margin-top: 10px;
  padding-bottom: 90px;
}
.dvs{
  padding-bottom: 60px;
}
// 头部tab
.tabs {
  background: linear-gradient(270deg, #660234 0%, #7b0b3b 100%);
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  &::-webkit-scrollbar {
    display: none;
  }
  ul {
    height: 37px;
    padding-top: 4px;
    line-height: 38px;
    position: relative;

    // margin: 0 auto;
    white-space: nowrap;
    display: flex;
    position: relative;
    margin-bottom: 6px;

    li {
      position: relative;
      color: #d679a6;
      font-size: 16px;
      margin: 0 18px;

      &.active {
        //  font-size: 20px;
        font-weight: 700;
        &::before {
          content: "";
          position: absolute;
          top: auto;
          left: 18%;
          bottom: -6px;
          right: auto;
          height: 3px;
          width: 60%;
          background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
          border-radius: 2px;
        }
      }
    }
    .con {
      font-size: 16px;
      color: #f2cc00;
      font-weight: 600;
      position: relative;
    }
  }
}
::v-deep .van-share-sheet__options {
  justify-content: space-around;
  padding: 16px 0;
}
::v-deep .van-loading {
  position: fixed;
  top: 100px;
  z-index: 100;
  width: 100%;
  height: 400px;
  line-height: 400px;
  text-align: center;
}
.tabse {
  width: 100%;
  background-color: #fff;
  border-bottom: 1px solid #ededef;
  overflow-y: hidden;
  overflow-x: auto;
  display: flex;
  &::-webkit-scrollbar {
    display: none;
  }
  ul {
    height: 37px;
    padding-top: 4px;
    line-height: 38px;
    position: relative;

    // margin: 0 auto;
    white-space: nowrap;
    display: flex;
    position: relative;
    margin-bottom: 6px;

    li {
      position: relative;
      color: #3f3f3f;
      font-size: 16px;
      margin: 0 18px;

      &.con {
        //  font-size: 20px;
        font-weight: 700;
        &::before {
          content: "";
          position: absolute;
          top: auto;
          left: 18%;
          bottom: -6px;
          right: auto;
          height: 3px;
          width: 60%;
          background: linear-gradient(270deg, #8e4ff5 0%, #7172f7 100%);
          border-radius: 2px;
        }
      }
    }
  }
}
</style>
